<template>
  <div id="pay">
      <div class="bt">&nbsp;/&nbsp;所有&nbsp;/&nbsp;商品列表
		<div class="seach">
			<input type="text" class="text" v-model="search_condition">
			<input type="submit" value="" class="icon" @click="like_search()">
		</div>
      </div>


	    <div class="shop_showarea">
	    <!-- 类别搜索标签 -->
		    <div class="category" v-if="is_type">
				<div class="title">商品分类</div>
				<div class="lable">
					<ul>
					    <li @click="label_search(-1)" :class="{active:typeid == -1}">全部</li>
						<li @click="label_search(item.id)" v-for="(item,index) in type " :class="{active:typeid == item.id}">{{ item.typename }}</li>
					</ul>
				</div> 
				<div style="width:100%;clear:left;"></div>
		    </div>
		    <div class="null" v-if="is_null">暂无数据...</div>
			<ul>

				<li v-for="(item,index) in shop_data" :class="{right_jl:(index+1) % 4 == 0 && index !=0 }">
					<div class="img_area">
						<router-link :to="{ name: 'fooddetail', params: { fid:item.id }}" ><img :src="item.img_url" alt=""></router-link>
						<p>{{ item.typename }}</p>
					</div>
					<div class="shop_summary">
						<p class="p1"><router-link :to="{ name: 'fooddetail', params: { fid:item.id }}" >{{ item.title }}</router-link></p>
						<p class="p2">评价:&nbsp;&nbsp;<span class="yellow">{{ item.evaluate+'星' }}</span></p>
						<p class="p3">￥{{ item.price_old }}</p>
						<p class="p4">{{ item.summary }}</p>
					</div>
				</li>
			
			</ul>
			<div class="clear"></div>
			<p class="btn" v-if="!is_null"><button @click="loadmore()">{{ btn_name }}</button></p>
	    </div>
   </div>
</template>

<script>

export default {
  data () { 
    return {
    	shop_data:[],
    	pagenum:1,
    	page:4,
    	maxpage:'',
    	is_null:false,
    	btn_name:'点击加载更多',
    	is_type:true,
    	type:'',
    	typeid:-1,
    	search_condition:''
    }
  },
  mounted:function(){
  	this.get_shop_data(this.pagenum,this.typeid);
  	this.get_type();
  },
  components: {
  },
  methods: {
  	loadmore(){
  		this.pagenum++;
  		if(this.pagenum>this.maxpage){
  			this.pagenum=this.maxpage;
  			
  			return false;
  		}
  		this.get_shop_data(this.pagenum,this.typeid);
  	},
  	get_shop_data(pagenum,typeid=-1,search = ""){
	    this.$http({
	        method:'GET',
	        url:'http://123.56.86.203/foodlist?pagenum='+this.pagenum+'&page='+this.page+'&typeid='+typeid+'&search='+search,
	    }).then(function(info){
	    	console.log(info);
	    	var data=info.data;
	    	if(data.status==0){
	    		this.shop_data=this.shop_data.concat(data.info);
	    		this.maxpage=data.maxpage;
	    		if(this.pagenum >= this.maxpage){
	    			this.btn_name='没有更多了...';
	    		}
	    		this.is_null=false;
	    	}else{
	    		this.is_null=true;
	    	}
	    },function(error){
	        console.log(error);
	    })
  	},
  	get_type(){
	    this.$http({
	        method:'GET',
	        url:'http://123.56.86.203/food/type',
	    }).then(function(info){
	    	var data=info.data;
	    	if(data.status==0){
	    		this.type=data.info;
	    	}else{
	    		this.is_type=false;
	    	}
	    },function(error){
	        console.log(error);
	    })
  	},
  	label_search(index){
 		this.typeid=index;
 		this.pagenum=1;
 		this.typeid != index?false:this.shop_data=[];
 		this.btn_name='点击加载更多';
 		this.get_shop_data(this.pagenum,this.typeid);
  	},
  	like_search(){
  		this.pagenum=1;
 		this.shop_data=[];
 	    this.search_condition!=this.search_condition?false:this.shop_data=[];
 		this.btn_name='点击加载更多';
 		this.get_shop_data(this.pagenum,-1,this.search_condition);
  	}
  }
}
</script>

<style scoped>
.null{
	width: 100%;
	font:bold 18px/30px '微软雅黑';
	text-align: center;
}
#pay{
  width:1000px;
  margin:0 auto;
}
.shop_showarea ul .right_jl{
	margin-right: 0;
}
.bt{
  margin-top:5px;
   width: 100%;
  height: 30px;
  font:13px/30px '微软雅黑';
  margin-bottom: 10px;
}
.clear{
	width: 100%;
	clear: left;
}
.shop_showarea{
	width: 100%;

}
.shop_showarea ul li{
	float: left;
	width: 22.5%;
	padding:10px 1% 6px 1%;
	background-color: #fff;
	margin-right:0.5%;
	margin-bottom: 5px;
	animation: moreshop 1s ease-in-out 1;
}

@keyframes moreshop{
  0%   {opacity: 0}
  100% {opacity: 1}
}
.shop_showarea ul li .img_area {
	float: left;
	width: 70px;

}
.shop_showarea ul li .img_area img{
	width: 100%;
	height: 70px;
	border-radius: 50%;
}
.shop_showarea ul li .img_area p{
	text-align: center;
	font:14px/21px '微软雅黑';
	color:#999;
}
.shop_showarea ul li .shop_summary{
	float: left;
	margin-left:15px;

}
.shop_showarea ul li .shop_summary .p1{
	font:bold 21px/22px '微软雅黑';
}
.shop_showarea ul li .shop_summary .p2{
	margin-top: 7px;
	font:14px/20px '微软雅黑';
	color:#999;
}
.shop_showarea ul li .shop_summary .p3{
	margin-top: 4px;
	font:16px/20px '微软雅黑';
	color:#CC0000;
}
.shop_showarea ul li .shop_summary .p4{
	margin-top: 2px;
	font:14px/20px '微软雅黑';
	color:#999;
}
.shop_showarea ul li .shop_summary .p2 .yellow{
	font:14px/20px '微软雅黑';
	color:#FFC30C;	
}
.btn{
	width: 100%;
	margin-top: 20px;
}
.btn button{
	margin-left: 40%;
	width: 20%;
	text-align: center;
	height: 40px;
	border: 1px solid #73C742;
	background-color: #73C742;
	font:18px/38px '微软雅黑';
	color:#fff;
}
.shop_showarea .category{
	width: 96%;
	padding:10px 2%;
	background-color: rgba(255,255,255,1);
	margin-top:5px;
	margin-bottom: 7px;
}
.shop_showarea .category .title{
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	font:15px/25px '微软雅黑';
	color:#999;
	height: 22px;
}
.shop_showarea .category .lable{
	width:75%;
	margin-left:1%; 
	float: left;
}
.shop_showarea .category .lable ul{
	width: 100%;

}
.shop_showarea .category .lable ul li{
	width: auto;
	padding:0px 10px;
	height: 25px;
	background-color:#eee;
	font:14px/25px '微软雅黑';
	color:#999;
	margin-right:20px;
	border-radius: 10px;
	cursor: pointer;
	margin-bottom: 5px;
}
.shop_showarea .category .lable ul .active{
	background-color: #DB0000;
	color:#fff;
}
.seach {
    width: 220px;
    height: 32px;
    float: right;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: #fff;
}
.seach input {
  float: left;
  height: 26px;
  line-height: 26px;
  border: 0px solid #fff;
}
.seach .text {
  outline-style: none;
  margin-left: 10px;
  margin-top: 2px;
  width: 75%; 
}
.seach .icon {
  margin-top: 2px;
  width: 30px;
  height: 30px;
	background-size: 100%;
  background-repeat: no-repeat;
  background:url('../../assets/search.png');
   }
</style>
